<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Tester</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <h1>Test Chat Interface</h1>
    <form id="chatForm">
        <div id="messagesContainer" class="message">
            <div class="form-group">
                <label for="role">Role:</label>
                <select id="role" name="role">
                    <option value="system">System</option>
                    <option value="user">User</option>
                    <option value="assistant">Assistant</option>
                </select>
            </div>
            <div class="form-group">
                <label for="content">Content:</label>
                <textarea id="content" name="content" required>Hello</textarea>
            </div>
            <div class="form-group">
                <label for="name">Name:</label>
                <input id="name" type="text" name="name">
            </div>
        </div>
        <button type="button" onclick="addMessage()">Add Next Message</button>
        <div class="form-group">
            <label for="engine">Engine:</label>
            <select id="engine">
                <option value="gpt-4">GPT-4</option>
                <option value="gpt-4o">gpt-4o</option>
                <option value="gpt-4-turbo">gpt-4-turbo</option>
            </select>
        </div>
        <button type="submit" class="submit-btn">Send Chat</button>
    </form>
    <textarea id="output" disabled></textarea>
</div>
<script src="script.js"></script>
</body>
</html>
